<template>
	<view>
		<view class="loginBox" v-if="isShow">
			<image :src="downloadBkPic('homeBg1')" mode="widthFix"></image>
			<view class="closeBox" @click="onCloseBtnClick">
				<u-icon name="close-circle" size="30" color="#fff"></u-icon>
			</view>
			<view class="loginTxtBox">
				<view>
					<u-checkbox-group @change="onRadioChange" v-model="isLoginBtnCanClick">
						<u-checkbox size="20" name="check" activeColor="#B1C93E" shape="circle"></u-checkbox>
					</u-checkbox-group>

					<text @click="onYinsiClick">本人已阅读并同意
						<text class="yinsiTxt">《“邮储银行公司金融易企典”小程序隐私保护声明》</text>
					</text>
				</view>
				<view :class="isBtnBling?'loginBtn loginCanClick':'loginBtn'">立即登录</view>
			</view>

			<view class="loginOpacityBox" v-if="isBtnBling">
				<button class="loginOpacityBoxbtn" size="mini" open-type="getPhoneNumber" lang="zh_CN"
					@getphonenumber="ongetPhoneNumber">允许</button>
			</view>
		</view>
		<view class="mask" v-if="isShow"></view>
	</view>
</template>

<script>
	import {getPhone,queryPublicKey} from "@/apis/index.js"
	import Encrypt from '@/utils/aesUtil'
	import { downloadBkPic } from 'utils/util.js'
	export default {
		name: "popLogin",
		props:['isShow'],
			
		data() {
			return {
				isBtnBling:false,
				isLoginBtnCanClick:[]
			};
		},
		methods:{
			downloadBkPic,
			onRadioChange(val){
				console.log(val)
				if(val.length){
					this.isBtnBling = true
				}else{
					this.isBtnBling = false
				}
			},
			onCloseBtnClick(){
				this.isBtnBling = false
				this.isLoginBtnCanClick = []
				this.$emit('onreject');
			},
			onYinsiClick(){
				uni.navigateTo({
					url:"/pages/privacy/privacy"
				})
			},
			ongetPhoneNumber(e) {
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					getPhone({
							jsCode: e.detail.code
						})
						.then((res) => {
							uni.setStorageSync('phoneJsCode', e.detail.code);
							uni.setStorageSync('phone', res.data);
							uni.setStorageSync('needLogin', false);
							this.$emit('onLoginConfirm');
						})
						.catch((err) => {});
				} else {
					this.isBtnBling = false
					this.isLoginBtnCanClick = []
					this.$emit('onreject');
				}
			},
		}
	}
</script>

<style lang="scss">
	.loginBox {
		position: fixed;
		z-index: 100;
		top: 24%;
		left: 10%;
		width: 80%;
		background-color: #fff;
		border-radius: 10rpx;
		.closeBox{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		&>image {
			width: 100%;
		}

		.loginTxtBox {
			padding: 30rpx 10rpx 20rpx;
			background-color: #fff;

			&>view:first-child {
				display: flex;
				justify-content: space-around;

				text {
					font-size: 24rpx;
					color: #6fb474;
				}
			}

			.yinsiTxt {
				text-decoration: underline;
			}

			.loginBtn {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: #fff;
				font-size: 34rpx;
				width: 90%;
				margin: 30rpx auto;
				border-radius: 90rpx;
				background-color: #8cbe7f;
			}

			.loginCanClick {
				background-color: #65be3f;
			}
		}

		.loginOpacityBox {
			position: absolute;
			opacity: 0;
			z-index: 10;
			width: 90%;
			height: 100rpx;
			bottom: 70rpx;
			left: 5%;

			.loginOpacityBoxbtn {
				width: 100%;
				height: 100%;
			}
		}
	}
	.mask {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    z-index: 99;
	    top: 0;
	    left: 0;
	    background: #000000;
	    opacity: 0.49;
	}
</style>
